<template>
  <div>
    <el-input
      v-model="showDeptName"
      :placeholder="placeholder"
      @focus="deptDialog"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="deptDialog"
      ></el-button>
    </el-input>
    <!-- <el-input :value="value" style="display: none"></el-input> -->
    <el-dialog
      :visible.sync="visibleDept"
      width="30%"
      :modal="false"
      :title="placeholder"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- <el-form size="mini" :inline="true">
        <el-form-item :label="$t('keyword')">
          <el-input v-model="filterText"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="default">{{ $t("query") }}</el-button>
        </el-form-item>
      </el-form> -->
      <el-tree
        class="filter-tree"
        :data="deptList"
        show-checkbox
        @check="handleCheckChange"
        :default-checked-keys="branchIds"
        :props="{ label: 'name', children: 'children' }"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        node-key="id"
        ref="tree"
      >
      </el-tree>
      <template slot="footer">
        <el-button type="default" @click="cancelHandle()" size="mini">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" @click="commitHandle()" size="mini">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "RenDeptTree",
  data() {
    return {
      filterText: "",
      visibleDept: false,
      deptList: [],
      dataList:[],//选中的数据
      showDeptName: "",
      // expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  props: {
    branchIds:Array,
    branName:String,
    query: Boolean,
    placeholder: String,
  },
  watch: {
    branName(val) {
      console.log(val,'111111111111111111111')
      this.showDeptName = val;
    },
    // branchIds(val){
    //   this.$nextTick(()=>{
    //       val.forEach(item=>{
    //       this.expandedKeys.push(Number(item))
    //     })
    //     console.log(this.expandedKeys,'this.expandedKeys')
    //   })
    // }
  },
  created(){
   
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
     this.dataList=  this.$refs.tree.getCheckedNodes().filter(item=>{
      return !item.children
    })
    },
    deptDialog() {
      this.expandedKeys = null;
      if (this.$refs.tree) {
        this.$refs.tree.setCurrentKey(null);
      }
      this.visibleDept = true;
      this.getDeptList(this.value);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getDeptList(id) {
      return this.$http
        .get("/findbrandbranchvds/getFindBrandBranchVdsGroupVoList")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.deptList = res.data;
        })
        .catch(() => {});
    },
    cancelHandle() {
      this.visibleDept = false;
  
    },
    clearHandle() {
      this.visibleDept = false;
    },
    commitHandle() {
        if(!this.deptList.length){
            this.$message.error('请选择车系');
            return;
        }
        let branchIds = [],branchChns=[];
        this.dataList.forEach(item=>{
          branchIds.push(item.id)
          branchChns.push(item.name)
        })
        let obj= {
          branchIds,
          branchChns
        }
      this.$emit("getDataIput",obj);
      // this.$emit("update:branchChns", branchChns);
      this.showDeptName = branchChns.join(',')
      this.visibleDept = false;
      // this.deptList = [];
      // this.filterText = "";
    },
  },
};
</script>
